
<%@ page import="java.util.*"%>
<%@ page import="java.text.*"%>
<%@page import="cn.com.dhcc.app.core.CoreEnv.CoreInitCtx"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>${appname}</title>
<%@ include file="/WEB-INF/view/common/css_js_ace.jsp"%>
<script type="text/javascript"
	src="${ctx}/static/FusionCharts/JSClass/FusionCharts.js"></script>
<!-- echarts -->
<script type="text/javascript"
	src="${ctx}/static/js/echarts.common.min.js"></script>
<link rel="stylesheet"
	href="${ctx}/static/FusionCharts/Contents/Style.css" type="text/css" />

<script type="text/javascript">
	$(document).ready(function() {
		updateChart();
	});

	function changeDateFomat() {

		var type = $("input[name='form-field-radio']:checked").val();
		var date;

		if (type == '0') {
			date = $('#hidden_day').val();
			$('#Date')
					.attr("onfocus",
							"WdatePicker({onpicked:function(){},c:'yyyy-MM-dd',maxDate:'%y-%M-{%d-1}'})");
		} else if (type == '1') {
			date = $('#hidden_month').val();
			$('#Date')
					.attr("onfocus",
							"WdatePicker({onpicked:function(){},dateFmt:'yyyy-MM',maxDate:'%y-%M-{%d-1}'})");
		} else {
			date = $('#hidden_year').val();
			$('#Date')
					.attr("onfocus",
							"WdatePicker({onpicked:function(){},dateFmt:'yyyy',maxDate:'%y-%M-{%d-1}'})");
		}

		$('#Date').val(date);
	}

	function updateChart() {
		var dateScope = $("input[name='form-field-radio']:checked").val();
		var dataScope = $("input[name='type']:checked").val();
		var date = $('#Date').val();
		var xName = '';
		if(dataScope == '0') {
			xName = '频率（次）';
		} else {
			xName = '数据量（条）';
		}
		
		$.ajax({
            url: _ctx + "/stat/get_taskSyn.do",
            type : "POST",
            dataType: 'json',
            data: {
            	dateScope : dateScope,
            	dataScope : dataScope,
    			date : date
            },
            success: function(resp) {
            	if (resp.status == '1') {
            		var chartData = resp.data;
            		
        			// 基于准备好的dom，初始化echarts实例
        	        var myChart = echarts.init(document.getElementById('chartdiv'));
        			
        			var mySeries = chartData.series;
        			mySeries.barWidth = '40';

        	        // 指定图表的配置项和数据
        	        if(dataScope == '0'){
        	        	
        	        
        	        var option = {
        	            title: {
        	                text: chartData.caption,
        	                x: "center"
        	            },
        	            tooltip: {},
        	            legend: {
        	                data:['同步频率'],
        	                bottom: '0%',
        	            },
        	            xAxis: {
        	            	name: xName,
        	            },
        	            yAxis: {
        	            	//data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        	            	data: chartData.categories,
							axisLabel:{
								formatter:function(val){
									var str = new String(val);
									val = "";
									var length = 8;
									while (str.length>length){
										var str1 = str.substr(0,length);
										var str2 = str.substr(length);
										val += str1+"\n";
										str = str2;
									}
									val += str;
									return val;
								}
							}
        	            },
        	            series: mySeries//chartData.series
        	            /* series: [{
        	                name: '同步频率',
        	                type: 'bar',
        	                itemStyle: {
        	                    normal: {　　　　　　　　　　　　　　 
        	                    	color: '#428BCA'
        	                    }
        	                },
        	                data: [10, 10, 20],
        	                barWidth:40
        	            	//data: chartData.values
        	            }]  */
        	        };
        	        
        	        } else {
        	        	
        	        var option = {
            	            title: {
            	                text: chartData.caption,
            	                x: "center"
            	            },
            	            tooltip: {},
            	            legend: {
            	                data:['数据量'],
            	                bottom: '0%',
            	            },
            	            xAxis: {
            	            	name: xName,
            	            },
            	            yAxis: {
            	            	data: chartData.categories,
								axisLabel:{
									formatter:function(val){
										var str = new String(val);
										val = "";
										var length = 8;
										while (str.length>length){
											var str1 = str.substr(0,length);
											var str2 = str.substr(length);
											val += str1+"\n";
											str = str2;
										}
										val += str;
										return val;
									}
								}
            	            },
            	            series: mySeries//chartData.series
            	            
            	        };
        	        }

        	        // 使用刚指定的配置项和数据显示图表。
        	        myChart.setOption(option);
					
				} else {
					 parent.ui.msg(resp.msg, 0);
				}
                
            }
        });

	}
	
	
	
	
</script>

</head>

<body>
	<div class="main-container" id="main-container">
		<div class="main-container-inner">
			<div class="main-content" style="margin-left: 0px;">
				<div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="icon-home home-icon"></i> 首页
						</li>
						<li class="active">综合统计</li>
						<li class="active">任务同步情况统计</li>
					</ul>
				</div>
				
				<div class="page-content">
					<div class="row">
						<div class="col-xs-12">
						<div class="tabbable">
								<ul class="nav nav-tabs" id="myTab">
									<li class="active">
								<a   href="${ctx}/stat/task_syn_stat.do">
									任务同步情况统计
								</a>
									</li>

									<li >
								<a  href="${ctx}/stat/taskSyncStat_info_list.do">
									表格查看
								</a>
									</li>

								</ul>
                        </div>
							<%-- <div class="widget-box transparent">
				
				<div class="widget-toolbar no-border">
				        <a class="btn btn-primary btn-xs" href="${ctx}/stat/task_syn_stat.do" ><i class=" icon-on-left"></i>任务同步频次统计&nbsp;&nbsp;</a>
						<a class="btn btn-primary btn-xs" href="${ctx}/stat/taskSyncStat_info_list.do" ><i class=" icon-on-left"></i>表格查看&nbsp;&nbsp;</a>
								
					    <a href="#" data-action="collapse"></a>
					
			   </div>
								
							</div> --%>
						</div>
				  </div>

				<div class="tab-content">
					<div class="row">
						<div class="col-xs-12">

							<div class="widget-box ">
							<div class="widget-header widget-header-flat">
										<h5 class="smaller lighter">
											<i class="icon-list"></i> &nbsp;
										</h5>
										<div class="widget-toolbar no-border" >
											<button class="btn btn-xs btn-primary" onclick="updateChart()">
												统计</button>&nbsp;&nbsp;&nbsp;
											<span>统计类型 &nbsp;:</span>
											<label> <input id="bm" name="type" type="radio"
											value="0" checked
											onchange="updateChart()" /> <span>频次(次)&nbsp;&nbsp;</span> </label>	
											<label> <input id="bm" name="type" type="radio"
											value="1" onchange="updateChart()" /> <span>数据量(条)&nbsp;&nbsp;</span>
										    </label>
										</div>
										
										<div class="widget-toolbar no-border">
										<%
											Calendar cal = Calendar.getInstance();
											cal.add(Calendar.DATE, -1);
											String date = new SimpleDateFormat("yyyy-MM-dd").format(cal
													.getTime());
											String month = new SimpleDateFormat("yyyy-MM")
													.format(cal.getTime());
											String year = new SimpleDateFormat("yyyy").format(cal.getTime());
										%>

										<input type="hidden" name="day" id="hidden_day"
											value="<%=date%>"> <input type="hidden" name="month"
											id="hidden_month" value="<%=month%>"> <input
											type="hidden" name="year" id="hidden_year" value="<%=year%>">

                                           

										<span class="input-icon input-icon-right width-100"> <input
											type="text" class="form-control form-input" id="Date"
											name="start_date" value="<%=date%> "
											onfocus="WdatePicker({onpicked:function(){},dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-{%d-1}'});" />
											<i class="icon-calendar blue pointer"
											onclick="javascript:$('#Date').focus();"></i> </span>
									</div>
									<div class="widget-toolbar no-border">
										<span>选择时间 :</span>											
									</div>
									<div class="widget-toolbar no-border">
										<label> <input name="form-field-radio" type="radio"
											value="0" id="date" checked="checked"
											onclick="changeDateFomat();" /> <span>日</span> </label>
									</div>
									<div class="widget-toolbar no-border">
										<label> <input name="form-field-radio" type="radio"
											value="1" id="month" onclick="changeDateFomat();" /> <span>月</span>
										</label>
									</div>
									<div class="widget-toolbar no-border">
										<label> <input name="form-field-radio" type="radio"
											value="2" id="year" onclick="changeDateFomat();" /> <span>年</span>
										</label>
									</div>
									<div class="widget-toolbar no-border">
										<span>选择周期 &nbsp;:</span>				
									</div>
								<!-- </div> -->
																									
									<!-- <a href="#" data-action="collapse">
										<i class="icon-chevron-up"></i>
									</a>
 -->						</div>
							</div>
								<div class="widget-body">
									<div class="widget-main">
										<div id="chartdiv" align="center" style="height:450px;">
											
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>